<script setup lang="ts">
// @ts-ignore
import son1 from './components/son1.vue'
// @ts-ignore
import son2 from './components/son2.vue'
// @ts-ignore
import son3 from './components/son3.vue'
// @ts-ignore
import slot1 from './components/slot.vue'
import { ref, provide } from 'vue'

let son33 = ref()
const count = ref(100)
const title = ref('我是标题')
const money = ref(99999)
const car = ref('奔驰')

const changeTitle = (val: string) => {
  console.log(val);
  title.value = val
}

const updataMoney = () => {
  count.value += 10
  son33.value.change()
}

provide('car', car)


const dataList = [
  {name: '张三', age: 18},
  {name: '李四', age: 20},
  {name: '王五', age: 22}
]

defineExpose({
  money
})
</script>

<template>
  <h1>组件通信</h1>
  <div style="display: flex; width: 1600px; height: 400px; background-color: pink;">
    父亲--Department--{{ count }}--{{ money }}--{{ car }}
    <son1 v-model:changeCount="count"></son1>
    <son2 :title="title" size="small" @changeTitle="changeTitle"></son2>
    <son3 ref="son33"></son3>
    <slot1 :dataList="dataList">
      <template #default="{row, index}">  
        <div :style="{color:row.age>=20?'red': 'green'}">{{index}} -- {{ row.name }}</div>
      </template>
    </slot1>
    <button @click="count+=20">点击父亲和son1各加20</button>
    <button @click="updataMoney">点击父亲加10son3减10</button>
  </div>
</template>

<style lang="scss" scoped>

</style>